<template>
  <div>
    <Row>
      <i-col class="y_query_right" :xs="{span: 24}" :sm="{span: 18}">
        <Select placeholder="类型" v-model="param.type" clearable class="y_condition" style="text-align: left;">
          <Option :value=1>产品标签</Option>
          <Option :value=2>用户标签</Option>
          <Option :value=3>订单标签</Option>
        </Select>
        <Input v-model="param.name" :clearable=true placeholder="名称" class="y_condition"></Input>
      </i-col>
      <i-col class="y_query_right" :xs="{span: 24}" :sm="{span: 2}">
        <Button type="primary" icon="md-search" @click="searchTab" class="y_condition">查询</Button>
      </i-col>
      <i-col class="y_query_right" :xs="{span: 24}" :sm="{span: 3}">
        <Button type="primary" icon="md-add" class="tiy_btn y_condition" @click="addTab">新增标签
        </Button>
      </i-col>
    </Row>
    <hr style="margin-top: 20px;margin-bottom: 20px;border: 0.5px #f1f1f1 solid;">




    <!--表格和分页-->
<!--    <Table stripe border class="base_table" ref="selection"-->
<!--           :columns="tabTable" :data="tabList" no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="tabList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in tabList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="标签名称" >{{item.name}}</KeyValueView>
              <KeyValueView title="标签类型" >{{item.typeName}}</KeyValueView>
              <KeyValueView title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
            </i-col>
            <i-col>
              <Button ghost size="small" icon="md-create" type="primary" @click="editTab(item.id)" style="margin-right: 0.5rem">编辑</Button>
              <Button ghost size="small" icon="md-trash" type="error"  @click="deleteTab(item.id,item.name)" >删除</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>



    <Modal v-model="addModal.isShow" :title="addModal.title"
      :mask-closable="false" @on-ok="saveTab" :loading="addModal.isLoading">
      <Form :model="tabData" :label-width="100" :rules="ruleTab"
            ref="tabForm" style="margin: 1rem 0px" class="modal_newuser_form">
        <div class="modal_base_div" style="">
          <Row>
            <i-col span="22">
              <FormItem label="标签名称" prop="name">
                <Input v-model.trim="tabData.name" placeholder="请输入" class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="10">
              <FormItem label="标签类型" prop="type">
                <Select v-model="tabData.type" clearable>
                  <Option :value=1>产品标签</Option>
                  <Option :value=2>用户标签</Option>
                  <Option :value=3>订单标签</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="10" v-if="tabData.type == 1" offset="2">
              <FormItem label="不做谷歌搜索" prop="noSeo">
                <i-switch v-model="tabData.noSeo"></i-switch>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="22">
              <FormItem label="说明" prop="description">
                <Input v-model="tabData.description" type="textarea" :autosize="true" maxlength="200" show-word-limit></Input>
              </FormItem>
            </i-col>
          </Row>
        </div>
      </Form>
    </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>
    import ICol from "../../../node_modules/view-design/src/components/grid/col";
    import tiyData from "./js/manageTab/tab_data";
    import {listTabs, init, save, getTabDetail, deleteTab, resetTabData} from "./js/manageTab/tab_fun";
    import KeyValueView from "../widgets/KeyValueView";


    export default {
        components: {ICol,KeyValueView},
        data() {
            return {
                tRole: {},
                tabList: tiyData.tData.tabList,
                tabData: tiyData.tData.tab,
                tabTable: tiyData.tabTable(this),
                addModal: tiyData.tStatus.addModal,
                param: tiyData.tParam,
                status: tiyData.tStatus,
                ruleTab: tiyData.tStatus.addModal.rules,
            }
        },
        computed: {},
        methods: {
            searchTab(){
                listTabs(this, tiyData);
            },
            editTab(id) {
                resetTabData(tiyData.tData.tab);
                tiyData.tParam.id = id;
                getTabDetail(this, tiyData);
                tiyData.tStatus.addModal.title = "修改标签";
            },
            addTab() {
                resetTabData(tiyData.tData.tab);
                tiyData.tStatus.addModal.title = "创建标签";
                tiyData.tStatus.addModal.isShow = true;
            },
            saveTab() {
                save(this, tiyData);
            },
            deleteTab(id, name) {
                let self = this;
                let msg = "确认删除管理标签 " + name + "，该操作无法撤回！";
                this.$Modal.confirm({
                    title: '确认删除标签',
                    content: '<p>'+msg+'</p>',
                    onOk: () => {
                        tiyData.tParam.id = id;
                        // tiyData.tParam.name = name;
                        deleteTab(self, tiyData);
                    },
                    // onCancel: () => {
                    //     this.$Message.info('Clicked cancel');
                    // }
                });
            }
        },
        mounted() {
            init(this, tiyData);
            // listTabs(this, tiyData);
        }
    }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
